<template>
  <div class="title-container">
    <span class="line"></span>
    <span class="title">{{ title }}</span>
  </div>
</template>

<script setup name="ZTitle">
import { toRefs } from 'vue';

// 接收 props
const props = defineProps({
  title: {
    type: String,
    default: '默认标题',
  },
});

// 解构 props
const { title } = toRefs(props);
</script>

<style lang="scss" scoped>
.title-container {
  @text-color: #000;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 10px;
}

.title {
  color: #6f6f6f;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
}

.line {
  display: inline-block;
  background-color: var(--el-color-primary);
  margin-right: 10px;
  width: 3px;
  height: 16px;
}
</style>
